import { Avatar, Badge, Button, message, Space } from 'antd';
import { BellOutlined, UserOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import { useState } from 'react';
import { getPreviewUrl } from '@utils/WeStudyUtil';

const MessageButton = () => {
  // 模拟未读消息数据
  const [unreadCount] = useState(10);

  const clickAvatar = () => {
    message.info("点击头像"); // 点击头像事件
  };

  const clickMessage = () => {
    message.info("点击消息"); // 点击消息事件
  };

  const previewUrl = getPreviewUrl();
  const avatarUrl = previewUrl + "4e80d97a462846db95b0c116e342a31f";

  return (
    <StyledWrapper>
      <Space size="small">
        {/* 消息提示按钮 */}
        <Badge count={unreadCount} overflowCount={99}>
          <Avatar
            onClick={clickMessage}
            style={{ backgroundColor: "#87d068", width: 36, height: 36 }}
            icon={<BellOutlined />}
          />
        </Badge>
        <Avatar
          onClick={clickAvatar}
          src={avatarUrl}
          style={{ backgroundColor: "#87d068", width: 40, height: 40, marginLeft: 10 }}
          icon={<UserOutlined />}
        />
      </Space>
    </StyledWrapper>
  );
};

export default MessageButton;

const StyledWrapper = styled.div`
  // 自定义全局样式（在CSS文件中添加）
  .ant-badge-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    line-height: 20px;
    top: -4px;
    right: -4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
`;